<template>
	<view class="apply-container">
		<!-- <tm-roll-notice @click="handleTestClick" list="请务必完善发票抬头信息，相同收费项账单将进行合并"></tm-roll-notice> -->
		<uni-notice-bar single color="#2979FF" background-color="#EAF2FF" text="请务必完善发票抬头信息，相同收费项账单将进行合并" />
		
		<view class="info-container-box">
			<view class="make-invoice-container">
				<view class="make-title">开票信息</view>
				
				<view class="content-box">
					<view class="public-row" @click="handleOpenBillType">
						<view class="public-title"> <text class="check-icon">*</text> 发票类型</view>
						<view class="public-right-box">
							<view class="public-content">{{invoiceName}}</view>
							<image class="notice-right-image" :src="getImgUrl('/applet_assets/safe_closed/right.png')" lazy-load="true" mode="scaleToFill" />
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">收费项</view>
						<view class="public-right-box">
							<view class="public-content">{{billType}}</view>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">可开金额</view>
						<view class="public-right-box">
							<view class="public-content">{{sum}}元</view>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">发票金额</view>
						<view class="public-right-box">
							<view class="public-content">{{sum}}元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="make-invoice-container margin-top">
				<view class="make-title">发票抬头</view>
				<view class="content-box">
					<view class="public-row">
						<view class="public-title"> <text class="check-icon">*</text> 租客名称</view>
						<view class="public-right-box">
							<u-input v-model="headerDetail.name" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title"><text class="check-icon">*</text>纳税人识别号</view>
						<view class="public-right-box">
							<u-input v-model="headerDetail.credit_code" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">银行账户</view>
						<view class="public-right-box">
							<u-input v-model="headerDetail.bank_name" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">预留电话</view>
						<view class="public-right-box">
							<u-input v-model="headerDetail.reserve_phone" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">开票地址</view>
						<view class="public-right-box">
							<u-input v-model="headerDetail.open_invoice_address" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">电子发票接收邮箱</view>
						<view class="public-right-box">
							<u-input v-model="headerDetail.invoice_receive_email" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
					<view class="public-row">
						<view class="public-title">电子发票接收手机号</view>
						<view class="public-right-box">
							<u-input v-model="headerDetail.invoice_receive_phone" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="fixed-footer">
			<u-button @click="handleCreateInvoice" class="custom-style" shape="circle" type="primary" text="立即申请"></u-button>
		</view>
		<tm-message ref="msgRef" :lines="2"></tm-message>
		<u-picker :show="billTypeShow" :columns="billColumns" keyName="label" title="发票类型" @confirm="handleConfirm" @cancel="handleCancel"></u-picker>
	</view>
</template>

<script lang="ts" setup>
	import {ref, reactive} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import tmRollNotice from '@/tmui/components/tm-roll-notice/tm-roll-notice.vue'
	import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
	import {ASSETS_HOST} from '@/config';
	import {invoiceHeadDetail, createInvoice} from '@/api_request/invoiceList';
	import { useInfoStore } from '@/store/userInfo';
	import { storeToRefs } from 'pinia';
	const userStore = useInfoStore()
	const {userInfo} = storeToRefs(userStore)
	
	const msgRef = ref(null)
	const headerDetail = ref({
		name: '', // 租客名称
		invoice_type: '', // 发票类型
		credit_code: '', // 纳税人识别号
		bank_name: '', // 开户行
		bank_account: '', // 银行账户
		reserve_phone: '', // 预留电话
		open_invoice_address: '', // 开票地址
		invoice_receive_email: '', // 发票接收邮箱
		invoice_receive_phone: '', // 发票接收手机号
		order_number:[],
		community_id: '',
		merchant_id: ''
	})
	const billTypeShow:boolean = ref(false)
	const billColumns = reactive([
		[
			{
			  label: '增值税普通发票（电子）',
			  id: 1
			},
			{
			  label: '增值税普通发票（纸质）',
			  id: 2
			},
			{
			  label: '增值税专用发票（电子）',
			  id: 3
			},
			{
			  label: '增值税专用发票（纸质）',
			  id: 4
			}
		]
	])
	const sum:string | number = ref(0)
	const billType:string= ref('')
	const invoiceName:string= ref('')
	const routerOption = ref(null)
	onLoad((option:any) => {
		routerOption.value = option
		sum.value = option.sum
		billType.value = option.billType
	})
	
	const getImgUrl = (url:string) => {
		return ASSETS_HOST + url
	}
	const handleTestClick = (index:number)=> {
		
	}
	// 获取发票抬头信息
	const getInvoiceHeadDetail = async ()=> {
		const {data, code, message} = await invoiceHeadDetail({merchant_id: userInfo.value.merchant_id});
		if(code == 200) {
			console.log('===billColumns==', billColumns);
			headerDetail.value = data
			headerDetail.value.name = data.name// 租客名称
			headerDetail.value.invoice_type = data.invoice_type // 发票类型
			headerDetail.value.credit_code = data.credit_code // 纳税人识别号
			headerDetail.value.bank_name = data.bank_name // 开户行
			headerDetail.value.bank_account = data.bank_account // 银行账户
			headerDetail.value.reserve_phone =  data.reserve_phone// 预留电话
			headerDetail.value.open_invoice_address = data.open_invoice_address // 开票地址
			headerDetail.value.invoice_receive_email = data.invoice_receive_email // 发票接收邮箱
			headerDetail.value.invoice_receive_phone = data.invoice_receive_phone // 发票接收手机号
			billColumns[0].forEach((item:any) => {
				if(item.id == data.invoice_type) {
					invoiceName.value = item.label
				}
			})
		}else {
			uni.$showMsg(message)
		}
	}
	
	const handleOpenBillType = () => {
		billTypeShow.value = true
	}
	const handleConfirm = (item:any)=> {
		console.log('===============', item.value);
		headerDetail.value.invoice_type = item.value[0].id
		invoiceName.value = item.value[0].label
		billTypeShow.value = false
	}
	const handleCancel = ()=> {
		billTypeShow.value = false
	}
	// 开票
	const handleCreateInvoice = async () => {
		if(!headerDetail.value.invoice_type) return uni.$showMsg('请选择发票类型') 
		if(!headerDetail.value.credit_code) return uni.$showMsg('请填写纳税人识别号') 
		if(!headerDetail.value.bank_name) return uni.$showMsg('请填写开户行') 
		if(!headerDetail.value.bank_account) return uni.$showMsg('请填写银行账户') 
		if(!headerDetail.value.reserve_phone) return uni.$showMsg('请填写预留电话') 
		if(!headerDetail.value.open_invoice_address) return uni.$showMsg('请填写开票地址') 
		if(!headerDetail.value.invoice_receive_email) return uni.$showMsg('请填写发票接收邮箱') 
		if(!headerDetail.value.invoice_receive_phone) return uni.$showMsg('请填写发票接收电话')
		 headerDetail.value.order_number = JSON.parse(routerOption.value.orderId)
		 headerDetail.value.community_id = userInfo.value.community_id
		 headerDetail.value.merchant_id = userInfo.value.merchant_id
		 const {data, code, message} = await createInvoice(headerDetail.value)
		 if(code == 200) {
			let pages = getCurrentPages()
			let prevPage = pages[pages.length - 2];
			prevPage.onLoad()
			// Toast.success('申请成功');
			uni.navigateBack({
				delta: 1
			})
		 }else {
			 uni.$showMsg(message)
		 }
		 
	}
	
	getInvoiceHeadDetail()
</script>

<style lang="scss" scoped>
	.apply-container {
		background-color: #F6F8FC;
		padding-bottom: 220rpx;
		box-sizing: border-box;
		
		.info-container-box {
			margin-top: 40rpx;
			
			.make-invoice-container {
				padding: 0 20rpx;
				box-sizing: border-box;
				
				.make-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
				
				.content-box {
					margin-top: 24rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					padding: 0 40rpx;
					box-sizing: border-box;
					
					.public-row:last-child {
						border: none;
					}
					
					.public-row {
						border-bottom: 1px dashed #F4F4F4;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 40rpx 0;
						box-sizing: border-box;
						
						.public-title {
							font-size: 28rpx;
							color: #8091A4;
							position: relative;
							
							.check-icon {
								position: absolute;
								top: 50%;
								font-size: 28rpx;
								left: -20rpx;
								transform: translateY(-50%);
								color: #EE4646;
							}
						}
						
						.public-right-box {
							display: flex;
							align-items: center;
							
							.public-content {
								font-size: 28rpx;
								color: #333333;
							}
							.notice-right-image {
								width: 12rpx;
								height:24rpx;
								margin-left: 16rpx;
							}
						}
					}
				}
			}
			.make-invoice-container.margin-top {
				margin-top: 40rpx;
			}
		}
		
		.fixed-footer {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;
			background-color: #FFFFFF;
			padding: 16rpx 40rpx;
			padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
			padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
			box-sizing: border-box;
			
			:deep(.u-button--primary) {
				font-size: 36rpx !important;
				background: #4A76F7 !important;
				height: 92rpx !important;
				border-radius: 100rpx !important;
			}
		}
		::v-deep .u-popup {
			.u-slide-up-enter-to {
				.u-popup__content {
					border-radius: 40rpx 40rpx 0 0;
					
					.u-picker {
						.u-toolbar {
							.u-toolbar__cancel__wrapper {
								.u-toolbar__wrapper__cancel {
									font-size: 28rpx !important;
									color: #999999 !important;
								}
							}
							
							.u-toolbar__title {
								font-size: 36rpx;
								color: #333333;
							}
							
							.u-toolbar__confirm__wrapper {
								.u-toolbar__wrapper__confirm {
									font-size: 28rpx !important;
									color: #165DFF  !important;
								}
							}
						}
					}
				}
			}
		}
	}
	
</style>